import React from 'react'
import PageTitle from 'component/page-title/index.jsx'

import MUtil from 'util/mm.jsx'
const __mm=new MUtil();

import Product from 'service/product-service.jsx'
const __product=new Product();

class CategoryAdd extends React.Component{
    constructor(props){
        super(props);
        this.state={
            parentId:0,
            categoryName:'',
            categoryList:[]
        }
    }
    componentDidMount(){
        this.loadCategoryList();
    }
    //加载品类列表,显示父品类
    loadCategoryList(){
        __product.getCategorytList().then(res=>{
            this.setState({
                categoryList:res
            });
        },errMsg=>{
            __mm.errorTips(errMsg);
        });
    }
    onValueChange(e){
        let name=e.target.name,
            value=e.target.value;
        this.setState({
            [name]:value
        })
    }
    onSubmit(e){
        let categoryName=this.state.categoryName.trim();
        //品类名称不为空
        if(categoryName){
            __product.saveCategory({
                parentId:this.state.parentId,
                categoryName:this.state.categoryName
            }).then(res=>{
                __mm.successTips(res);
                this.props.history.push('/product-category/index');
            },errMsg=>{
                __mm.errorTips(errMsg);
            })
        }else{
            __mm.errorTips('请输入品类名称');
        }
    }
    render(){
        return (
            <div id="page-wrapper">
                <PageTitle title="品类列表" />
                <div className="row">
                    <div className="col-md-12">
                        <div className="form-horizontal">
                            <div className="form-group">
                                <label className="col-md-2 control-label">所属品类</label>
                                <div className="col-md-5">
                                    <select name="parentId" className="form-control" onChange={(e)=>{this.onValueChange(e)}}>
                                        <option value="">父品类</option>
                                        {
                                            this.state.categoryList.map((category,index)=>{
                                                return <option value={category.id} key={index}>{category.name}</option>
                                            })
                                        }
                                    </select>
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-md-2 control-label">品类名称</label>
                                <div className="col-md-5">
                                    <input type="text" className="form-control" name="categoryName" onChange={(e)=>{this.onValueChange(e)}} placeholder="请输入品类名称" />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-sm-offset-2 col-sm-10">
                                    <button type="submit" className="btn btn-primary" onClick={(e)=>this.onSubmit(e)}>提交</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}
export default CategoryAdd;